import axios from 'axios'
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  //共享的数据
  state: {
    count:0,
    title:undefined,
    //所有任务列表
    list:[],
    //文本框的输入内容
    inputValue:'',
    nextId:7,
    viewKey:'all',
  },
  //mutation用于变更state里面的数据
  //mutation不能执行异步操作
  mutations: {
    //操作count自增
    add(state){
      state.count++
    },
    addN(state,step){
      state.count += step
    },
    substac(state){
      state.count--
    },
    substacN(state,step){
      state.count -= step
    },
    changTitle(state,step){
      state.title = step
    },
    initList(state,list){
      state.list = list
    },
    //为store里面的inputValue赋值
    setInputValue(state,val){
      state.inputValue = val
    },
    //添加列表项
    addItem(state){
      const obj = {
        id:state.nextId,
        info:state.inputValue,
        done:false
      }
      state.list.push(obj)
      state.nextId++
      state.inputValue = ''
    },
    //根据id删除对应的item事项
    removeItem(state,id){ 
      const i = state.list.findIndex(x => 
        x.id === id
      )
      if(i !== -1){
        //从找到的id的索引开始删除 删除一项
        state.list.splice(i,1)
      }
    },
    //根据id去改变checkbox的选中状态
    changeStatus(state,parms){
      //查找索引
      const i = state.list.findIndex(x => x.id === parms.id)
      if(i !== -1){
        state.list [i].done = parms.status
      }
    },
    //清除已完成的item
    cleanDone(state){
      state.list = state.list.filter(x => x.done === false)
    },
    //修改视图的key值
    changeViewKey(state,key){
      state.viewKey = key
    },

  },
  //在action里面进行异步操作
  //用context去联系mutation
  //在action中不能直接去修改state里面的数据 必须通过context.commit()去触发某个mutation才可以
  actions: {
    addasync(context){
      setTimeout(() => {
        context.commit('add')
      }, 2000);
    },
    addasyncn(context,step){
      setTimeout(() => {
        context.commit('addN',step)
      }, 2000);
    },
    subasync(context){
      setTimeout(() => {
        context.commit('substac')
      }, 2000);
    },
    subasyncn(context,step){
      setTimeout(() => {
        context.commit('substacN',step)
      }, 2000);
    },
    //获取list json
    getList(context){
      axios.get('/list.json').then((data)=>{
        //console.log(data.data)
        //data里面的data才是数组内容
        context.commit('initList',data.data)
      })
    }
  },
  modules: {},
  //getter用于对store里面的数据进行加工处理成新的数据
  //store中的事件发生变化 getter的数据也会发生变化
  getters:{
    showNum:state => {
      return '当前最新的数量属 【'+state.count+'】'
    },
    //未完成任务的个数
    unDoneLength(state){
      //filter x代表list里面的每一项 每一项的done是false就过滤出来 最后过滤出一个新的数组 新的数组的长度就是未完成的个数
      return state.list.filter( x => x.done === false).length
    },
    //根据点击下方的不同状态栏 返回不同的list 没有改变state里面的list 
    infolist(state){
      if(state.viewKey === 'all'){
        return state.list
      }
      if(state.viewKey === 'undone'){
        return state.list.filter( x => x.done === false)
      }
      if(state.viewKey === 'done'){
        return state.list.filter( x => x.done === true)
      }
      return state.list
    }
  },

})
